import { useEffect } from "react";

// import style from "./index.module.less";
import { Drawer } from "antd";
import { EditableProTable } from "@ant-design/pro-components";
import type { ICard } from "@/utils/types";
import { getCardColumns } from "./constants";
import { useCards, useDeleteCard, useEditCardInfo } from "@/services/card";
interface IProps {
  onClose: () => void;
  id?: string;
}
/**
 * 消费卡
 */
const ConsumeCard = ({ onClose, id = "" }: IProps) => {
  const { data, loading, refetch } = useCards(id);
  const [del, delLoading] = useDeleteCard();
  const [edit, editLoading] = useEditCardInfo();

  useEffect(() => {
    // console.log(id);
    console.log("useCards", data);
  }, []);
  const onDeleteHandler = (id: string) => {
    del(id, refetch);
  };
  const onSaveHandler = (d: ICard) => {
    console.log("d", d);
    edit(
      d.id === "new" ? "" : d.id,
      { name: d.name, type: d.type, time: d.time, validityDay: d.validityDay },
      id,
      refetch
    );
  };
  return (
    <Drawer title={"关联消费卡"} width="80vw" open onClose={() => onClose()}>
      <EditableProTable<ICard>
        headerTitle="请管理该课程的消费卡"
        rowKey="id"
        recordCreatorProps={{
          record: (index: number) => {
            console.log("record-index", index);
            return {
              id: "new",
              name: "",
              time: 0,
              validityDay: 0,
            };
          },
        }}
        value={data}
        columns={getCardColumns(onDeleteHandler)}
        loading={loading || editLoading || delLoading}
        editable={{
          onSave: async (_rowKey, d) => {
            onSaveHandler(d);
          },
          onDelete: async (key) => {
            onDeleteHandler(key as string);
          },
        }}
      />
    </Drawer>
  );
};

export default ConsumeCard;
